<!--
 * @Author: White
 * @description: 文章详情
 * @LastEditTime: 2021-08-12 18:04:06
-->

<template>
  <div class="main" v-if="main[0]">
    <h1>{{main[0].title}}</h1>
    <img v-if="main[0].cover" :src="main[0].cover" alt="">
    <p class="main-content">{{main[0].content}}</p>
    <p class="main-time">{{$filters.timefilter("yyyy-MM-dd hh:mm:ss", main[0].time)}}</p>
    <p class="main-author">{{main[0].author}}</p>
  </div>
</template>

<script>
import { useRoute } from 'vue-router'
import { defineComponent, reactive, toRefs } from 'vue'
import { auth, app } from '@/api/clouldbase'
export default defineComponent({
  setup () {
    const data = reactive({
      main: []
    })
    const routerquery = useRoute()
    auth.anonymousAuthProvider().signIn().then(() => {
      const db = app.database()
      console.log(routerquery.query.id)
      db.collection('nav_content').where({
        _id: routerquery.query.id
      }).get().then(res => {
        data.main = res.data
      })
    }).catch(err => {
      console.log(err)
    })
    return {
      ...toRefs(data)
    }
  }
})
</script>

<style lang="scss" scoped>
.main {
    max-width: 1200px;
    height: calc(100vh - 77px);
    margin: 0 auto;
    h1 {
        font-size: 30px;
        line-height: 40px;
        text-align: center;
    }
    img {
        width: 100%;
        height: 300px;
    }
    .main-content {
        line-height: 30px;
        text-indent: 40px;
    }
    .main-time {
        text-align: right;
    }
    .main-author {
        text-align: right;
        margin-top: 10px;
    }
}
</style>
